<template>
	<div class="Article-header" :class="{ 'fixed-header': isScrolled }">
		<Header />
	</div>
	<div class="Article-body">
		<div class="Article-center">
			<div class="Article-search">
				<input type="text" v-model="title" placeholder="请输入你想查询的文章题目" />
				<div @click="searcharticle()">
					<img src="@/img/user/search.svg" alt="" />
				</div>
			</div>
			<div class="Article-box">
				<div class="Article-tab" @click="downloadImage">
					<div class="Article-title" :style="{ backgroundImage: `url('${imageUrl}')` }">
					</div>
					<p>
						随机美图下载
					</p>
				</div>
				<div class="Article-tab" v-for="item in tabs" @click="getarticlebytab(item.id)">
					<div class="Article-title" :style="{ backgroundImage: `url('https://api.anosu.top/img')` }">

					</div>
					<p>
						{{item.tab_name}}
					</p>
				</div>
			</div>
		</div>

	</div>
	<div class="Article-active" v-if="isshowTimeLine" ref="articleActiveRef">
		<TimeLine class="TimeLine" :items="blogPosts" />
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		reactive
	} from 'vue';
	import { v4 as uuidv4 } from 'uuid';
	import {
		onClickOutside
	} from '@vueuse/core';
	import axios from 'axios';
	import Header from '../header/Header.vue'; // 引入你的 Header 组件
	import TimeLine from './timeline/TimeLine.vue';

	const isScrolled = ref(false);
	const intervalId = ref(null);
	const showClassTimeoutId = ref(null);
	const tabs = ref([]);
	// 定义处理滚动事件的函数
	const handleScroll = () => {
		// 获取当前窗口的垂直滚动距离 (兼容多种浏览器)
		const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
		const headerHeight = 50; // 你的头部实际高度，用于判断是否滚过了头部

		// 判断滚动方向
		if (currentScrollTop > lastScrollTop.value && currentScrollTop > headerHeight) {
			// --- 向下滚动 ---
			// 当前滚动位置 > 上次位置，表示向下滚动
			// 并且，滚动距离已经超过了头部的高度 (避免刚开始滚动一点点就隐藏)
			// 设置 isScrolled 为 true，这将给 .Index-header 添加 'fixed-header' 类
			isScrolled.value = true;

		} else if (currentScrollTop < lastScrollTop.value) {
			// --- 向上滚动 ---
			// 当前滚动位置 < 上次位置，表示向上滚动
			// 设置 isScrolled 为 false，这将移除 'fixed-header' 类
			isScrolled.value = false;
		}
		// else {
		// 如果 currentScrollTop === lastScrollTop.value (例如水平滚动或无垂直滚动)，则不改变状态
		// 如果 currentScrollTop <= headerHeight 并且向下滚动，也不隐藏，保持显示
		// }

		// 更新上一次滚动的位置，为下一次事件触发时的比较做准备
		// 使用 Math.max 确保 lastScrollTop 的值不会小于 0 (虽然 scrollTop 通常不会为负)
		lastScrollTop.value = Math.max(0, currentScrollTop);
	};
	onMounted(() => {
		gettab();
		// 向 window 对象添加 'scroll' 事件监听器，并指定 handleScroll 函数作为回调
		window.addEventListener('scroll', handleScroll);

		// 监听点击外部事件
		onClickOutside(articleActiveRef, () => {
			if (isshowTimeLine.value) {
				isshowTimeLine.value = false;
			}
		});

	});

	// 组件卸载前执行
	onUnmounted(() => {
		// 从 window 对象移除之前添加的 'scroll' 事件监听器
		// 传入相同的 handleScroll 函数引用以确保正确移除
		// 这是非常重要的，可以防止内存泄漏
		window.removeEventListener('scroll', handleScroll);
		if (intervalId.value) {
			clearInterval(intervalId.value);
		}
		// Clear any pending timeout for adding the class effect
		if (showClassTimeoutId.value) {
			clearTimeout(showClassTimeoutId.value);
		}
	});


	const imageUrl = ref('https://api.anosu.top/img/');
	const downloadImage = async () => {
		try {
			// 发送请求获取图片数据
			alert("下载速度不稳定同时是他人api请求适可而止，小心被封，关闭弹窗请等待");
			const response = await axios.get("/imgbg", {
				responseType: 'blob'
			});
			const blob = response.data;

			// 创建一个临时的 URL
			const url = URL.createObjectURL(blob);

			// 创建一个 <a> 标签
			const link = document.createElement('a');
			link.href = url;
			// const uuid = crypto.randomUUID();
			// link.download = `${uuid}.jpg`; // 可以自定义下载文件名
			const uuid = uuidv4();
			link.download = `${uuid}.jpg`;

			// 将 <a> 标签添加到页面并模拟点击
			document.body.appendChild(link);
			link.click();

			// 移除 <a> 标签并释放临时 URL
			document.body.removeChild(link);
			URL.revokeObjectURL(url);
		} catch (error) {
			if (error.response) {
				console.error('响应状态码:', error.response.status);
				console.error('响应数据:', error.response.data);
			} else if (error.request) {
				console.error('没有收到响应:', error.request);
			} else {
				console.error('请求设置出错:', error.message);
			}
			console.error('下载图片时出错:', error);
		}
	};


	// let timer;
	// onMounted(() => {
	// 	// timer = setInterval(() => {
	// 	// 	// 这里可以根据你的实际需求更新图片地址，例如从服务器获取新的图片地址
	// 	// 	imageUrl.value = '';
	// 	// }, 5000);
	// });

	// onUnmounted(() => {
	// 	clearInterval(timer);
	// });


	function gettab() {
		const res = axios.post("/api/tabs/selecteq", {}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				console.log(response.data);
				if (response.data.code == 200) {
					tabs.value = response.data.data;
					// console.log(tabs.value);
				} else {
					console.log('获取tabs失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}

	function getarticlebytab(id) {
		const res = axios.post("/api/article/selecteq", {
			tab_id: id
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				console.log(response.data);
				if (response.data.code == 200) {
					blogPosts.value=response.data.data;
					isshowTimeLine.value = true;
				} else {
					console.log('获取tabs失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}
	const articleActiveRef = ref(null);
	const isshowTimeLine = ref(false);
	const blogPosts = ref([]);
		// {
	// 		id: 1,
	// 		time: new Date('2024-02-11').getTime(),
	// 		title: '第三方网易音乐播放器安利',
	// 		url: '/posts/music-player'
	// 	},
	// 	{
	// 		id: 2,
	// 		time: new Date('2024-01-25').getTime(),
	// 		title: '2024年博客改版计划',
	// 		url: '/posts/blog-plan-2024'
	// 	},
	// 	{
	// 		id: 3,
	// 		time: new Date('2024-01-15').getTime(),
	// 		title: 'Vue3 + TypeScript 开发体验',
	// 		url: '/posts/vue3-typescript'
	// 	},
	// 	{
	// 		id: 4,
	// 		time: new Date('2024-01-05').getTime(),
	// 		title: '新年技术规划',
	// 		url: '/posts/tech-plan-2024'
	// 	},
	// 	{
	// 		id: 5,
	// 		time: new Date('2023-12-28').getTime(),
	// 		title: '年终总结：我的2023',
	// 		url: '/posts/summary-2023'
	// 	},
	// 	{
	// 		id: 6,
	// 		time: new Date('2023-12-20').getTime(),
	// 		title: '使用Docker部署chatGPT',
	// 		url: '/posts/docker-chatgpt'
	// 	},
	// 	{
	// 		id: 7,
	// 		time: new Date('2023-12-15').getTime(),
	// 		title: 'Argon主题美化',
	// 		url: '/posts/argon-theme'
	// 	},
	// 	{
	// 		id: 8,
	// 		time: new Date('2023-12-11').getTime(),
	// 		title: '博客主题推荐'
	// 	},
	// 	{
	// 		id: 9,
	// 		time: new Date('2023-12-09').getTime(),
	// 		title: '个人博客网站搭建',
	// 		url: '/posts/blog-setup'
	// 	},
	// 	{
	// 		id: 10,
	// 		time: new Date('2023-12-07').getTime(),
	// 		title: '服务器优化',
	// 		url: '/posts/server-optimize'
	// 	},
	// 	{
	// 		id: 11,
	// 		time: new Date('2023-11-28').getTime(),
	// 		title: 'Next.js vs Nuxt.js 对比分析',
	// 		url: '/posts/nextjs-vs-nuxtjs'
	// 	},
	// 	{
	// 		id: 12,
	// 		time: new Date('2023-11-15').getTime(),
	// 		title: '前端性能优化实践',
	// 		url: '/posts/frontend-performance'
	// 	},
	// 	{
	// 		id: 13,
	// 		time: new Date('2023-10-20').getTime(),
	// 		title: 'TypeScript 高级特性解析',
	// 		url: '/posts/typescript-advanced'
	// 	},
	// 	{
	// 		id: 14,
	// 		time: new Date('2023-09-10').getTime(),
	// 		title: '服务端渲染(SSR)实践',
	// 		url: '/posts/ssr-practice'
	// 	},
	// 	{
	// 		id: 15,
	// 		time: new Date('2023-08-15').getTime(),
	// 		title: '微前端架构探索',
	// 		url: '/posts/micro-frontend'
	// 	},
	// 	{
	// 		id: 16,
	// 		time: new Date('2023-07-01').getTime(),
	// 		title: '前端工程化实践',
	// 		url: '/posts/frontend-engineering'
	// 	},
	// 	{
	// 		id: 17,
	// 		time: new Date('2023-06-15').getTime(),
	// 		title: 'Vue3 组合式API最佳实践',
	// 		url: '/posts/vue3-composition-api'
	// 	},
	// 	{
	// 		id: 18,
	// 		time: new Date('2023-05-20').getTime(),
	// 		title: 'Git工作流规范',
	// 		url: '/posts/git-workflow'
	// 	},
	// 	{
	// 		id: 19,
	// 		time: new Date('2022-12-25').getTime(),
	// 		title: '2022年度技术总结',
	// 		url: '/posts/tech-summary-2022'
	// 	},
	// 	{
	// 		id: 20,
	// 		time: new Date('2022-11-05').getTime(),
	// 		title: '旧文章回顾',
	// 		url: '/posts/old-review'
	// 	}
	// ]);
	const title=ref('');
	function searcharticle(){
		const res = axios.post("/api/article/selecteq", {
			title: title.value
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				console.log(response.data);
				if (response.data.code == 200) {
					blogPosts.value=response.data.data;
					isshowTimeLine.value = true;
				} else {
					console.log('查询文章失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color: #000;
		overflow: hidden;
	}

	.Article-header {
		width: 100%;
		height: 50px;
		// background-color: antiquewhite;
		position: fixed;
		/* 改为 fixed 或 sticky 以便在滚动时保持在顶部 */
		top: 0;
		left: 0;
		z-index: 10;
		transition: transform 0.3s ease;
		/* 改为使用 transform 过渡，性能更好 */
		transform: translateY(0);
		/* 初始状态 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 可选：添加阴影 */
	}

	.fixed-header {
		/* margin-top: -50px;  <-- 使用 transform 替代 margin-top */
		transform: translateY(-100%);
		/* 向上移动自身高度 */
	}

	.Article-body {
		width: 100%;
		// height: calc(100vh - 50px);
		height: 100vh;
		background-image: url('../../../img/user/windows.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;

		display: flex;
		justify-content: center;
		align-items: flex-end;

		.Article-center {
			width: 60%;
			height: 85%;
			z-index: 1;
			display: block;
			justify-content: center;

			.Article-search {
				width: 100%;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;

				input {
					width: 80%;
					height: 60px;
					border-radius: 20px 0px 0px 20px;
					outline: none;
					padding-left: 20px;
					// text-align: center; /* 文字水平居中 */
				}

				div {
					width: 120px;
					height: 60px;
					background-color: #6487fa;
					border-radius: 0px 20px 20px 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					img {
						width: 50px;
						height: 50px;
					}
				}

			}

			.Article-box {
				width: 100%;
				height: 100%;
				overflow: auto;
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
				/* 自动调整列数，每列最小宽度为 100px，最大为 1fr */
				grid-auto-rows: minmax(300px, 300px);
				/* 自动生成的行最小高度为 100px，最大为自动适应内容 */
				gap: 30px;
				/* 网格项之间的间距 */



				.Article-tab {
					width: 200px;
					height: 300px;
					margin: 30px 30px 30px 50px;
					// background-color: aliceblue;
					display: block;
					cursor: pointer;

					// justify-self: center;
					.Article-title {
						width: 100%;
						height: 260px;
						border-radius: 20px;
						// background-color: antiquewhite;
						background-size: cover;
						background-repeat: no-repeat;
						// background-attachment: fixed;

					}

					p {
						font-size: 14px;
						color: #fff;
						font-weight: 700;
						display: flex;
						align-items: center;
						justify-content: center;
						// margin: 10px 0px 10px 55px;
					}
				}

			}

		}
	}

	.Article-body::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		
		backdrop-filter: blur(3px);
		/* 调整 blur 值来控制磨砂玻璃的模糊程度，值越大越模糊 */
		/* 兼容部分 Safari 浏览器 */
		background-color: rgba(116, 116, 116, 0.1);
		/* 可以调整背景颜色和透明度，这里是白色半透明示例 */

		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		z-index: 0;
	}

	.Article-active {
		width: 60%;
		min-width: 800px;
		height: 80%;
		z-index: 2;
		position: absolute;
		overflow: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		scrollbar-width: thin;
		/* 滚动条宽度，可选值有 'thin' 和 'auto' */
		scrollbar-color: #fff rgba(32, 32, 32, 0.1);
		/* 滑块颜色和轨道颜色 */
	}


	.TimeLine {
		content: "";
		position: absolute;
		width: 100%;
		min-height: 726px;
		backdrop-filter: blur(10px);
		/* 调整 blur 值来控制磨砂玻璃的模糊程度，值越大越模糊 */
		/* 兼容部分 Safari 浏览器 */
		background-color: rgba(32, 32, 32, 0.1);
		/* 可以调整背景颜色和透明度，这里是白色半透明示例 */
		background-attachment: fixed;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		z-index: -1;
	}
</style>